<template>
  <div class="m-tabbar">
    <slot></slot>
  </div>
</template>
<script>
  import mTabbarItem from './tabbar-item'

  export default {
    components: {
      mTabbarItem
    },
    computed: {
      value () {
        return this.$route.matched[0].name
      }
    }
  }
</script>
<style lang="scss" scoped>
  .m-tabbar {
    display: flex;
    flex-direction: row;
    position: fixed;
    z-index: 9;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    height: 50px;
    background: #fff;
    border-top: 1px solid #f2f2f2;
    padding-top: 5px;
  }
</style>
